@include('share.__header');

<link rel="stylesheet" href="{{asset('index/css/index.css')}}">

<!-- 成功弹出框 -->
  <div class="alert"></div>
	<div class="clearfix" style="height:0;"></div>
	<!--[2]main-->
	<main>
		@include('share.messages')
		@foreach($lst as $k=>$v)
		<div class="cardArticle">
			<div class="cardAuthor">
				<a href="" class="authorImgA">
					@if($v->avatar)
					<img src="{{asset('storage').$v->avatar}}" alt="" class="authorImg">
					@else
					<img src="{{asset('public/images/wu.JPEG')}}" alt="" class="authorImg">
					@endif
				</a>
				<h2 class="authorName"><a href="">
					@if($v->incognito==1)
					神之Coser
					@else
					{{$v->nickname}}
					@endif
				</a></h2>
				<!--  这里需要判断性别-->
				@if($v->sex==1)
				<div class="authorMessage"><i class="fa fa-male authorSex"></i><span class="authorAge">@if($v->age){{$v->age}}@else保密@endif</span></div>
				@elseif($v->sex==2)
				<div class="authorMessage authorFemale"><i class="fa fa-female authorSex"></i><span class="authorAge">@if($v->age){{$v->age}}@else保密@endif</span></div>
				@else
				<div class="authorMessage authorsecret"><i class="fa fa-info authorSex"></i>@if($v->age){{$v->age}}@else保密@endif</span></div>
				@endif
			</div>
			<div class="cardContent">
				<a href="{{url('/article/'.$v->id)}}">
					{{$v->content}}
				</a>
			</div>
			@if(!empty($v->content_pic[0]))
						<ul  class="clearfix" style="width: 320px;">
								 @foreach($v->content_pic as $imgv)
								<li class="" style="width: 100px;height: 100px;;margin: 0 0.25rem 0.25rem 0;display: inline-block;"><a href="{{url('/article/'.$v->id)}}"><img src="{{asset('storage').$imgv}}" alt="" style="width: 100%;height: 100%;"/></a></li>
								@endforeach
						</ul>
			@endif
			<div class="cardStats">
				<span class="cardVote">
				 <i class="voteNumber" id="vote">{{$v->zannum}}</i>
				 <i class="voteText">赞</i>
				</span>
				<span class="cardComments">
					<span class="commentsdash"> · </span>
				<a href="" class="commentsTotal">
					<i class="commentsNumber">{{$v->replynum}}</i>
					<i class="commentsText">评论</i>
				</a>
				</span>
				<span> ⋅</span>&nbsp;发表于
				<span><i class="voteNumber">{{$v->create_time}}</i></span>
			</div>

			<div class="interaction clearfix">
				<ul class="pull-left interactionLeft clearfix">
					<li class="pull-left inter1Li praise"><a href="javascript:void(0)"><i class="fa fa-thumbs-o-up"></i></a></li>
					<li class="pull-left inter1Li criticism"><a href="javascript:void(0)"><i class="fa fa-thumbs-o-down"></i></a></li>
					<li class="pull-left inter1Li"><a href="{{ url('/article/'.$v->id) }}"><i class="fa fa-comment-o"></i></a></li>
					<input type="hidden" value="{{$v->id}}" name="hhhh" class="arid">
				</ul>
				<ul class="pull-right interactionRight clearfix">
					<li class="pull-left inter2Li"><a href=""><i class="fa fa-weixin"></i></a></li>
					<li class="pull-left inter2Li"><a href=""><i class="fa fa-qq"></i></a></li>
					<li class="pull-left inter2Li"><a href=""><i class="fa fa-dribbble"></i></a></li>
					<li class="pull-left inter2Li"><a href=""><i class="fa fa-weibo"></i></a></li>
				</ul>
			</div>
		</div>
		@endforeach
	</main>
	<div class="cardArticle">
		{!!$lst->links()!!}
	</div>
	<!--[3]footer-->
	<footer></footer>
@include('share.__login')

</body>
<script src="{{asset('public/js/jquery.min.js')}}"></script>
<script src="{{asset('public/js/bootstrap.min.js')}}"></script>
<script src="{{asset('public/js/navbar.js')}}"></script>
<script src="{{asset('index/js/index.js')}}"></script>
<script>
$(function () {
		$('[data-toggle="tooltip"]').tooltip();
		$('.cardArticle').map(function () {
			var that = $(this);
			var arid = that.find('.arid').val();
			// 点击赞赏
		$(this).find('.praise').click(function () {
         $.ajax({
	         type: "GET",
	         url: "{{url('/ajaxzan')}}",
	         data: {arid:arid},
	         dataType: "json",
	         success: function(data){
						 if(data.msg==1){
							 success1();
						 }else if(data.msg==0){
							 alert('陛下您已经点过一次了');
						 }else if(data.msg==2){
							 alert('请先登录');
						 }
					 }
 				});
				function success1(){
					var className = that.find('.praise i').hasClass('fa-thumbs-up');
					console.log('yyt'+className);
					// 没有这个类名可以点击
					if (!className) {
						var html = Number(that.find('#vote').html());
						console.log(html);
						that.find('#vote').html(html + 1);
					}
					that.find('.praise i').removeClass('fa-thumbs-o-up').addClass('fa-thumbs-up');
					that.find('.criticism i').addClass('fa-thumbs-o-down').removeClass('fa-thumbs-down');
				}
			})
			// 点击批评
			$(this).find('.criticism').click(function () {
						    $.ajax({
						             type: "GET",
						             url: "{{url('/ajaxchai')}}",
						             data: {arid:arid},
						             dataType: "json",
						             success: function(data){
													 if(data.msg==1){
														 success2();
													 }else if(data.msg==2){
														 alert('请先登录');
													 }else if(data.msg==0){
														 alert('陛下您已经点过一次了');
													 }
												 }
         				});
				function success2(){
					var className = that.find('.criticism i').hasClass('fa-thumbs-down');
					// 没有这个类名可以点击
					if (!className) {
						var html = Number(that.find('.voteNumber').html());

						that.find('.voteNumber').html(html - 1);
					}
					that.find('.criticism i').removeClass('fa-thumbs-o-up').addClass('fa-thumbs-down');
					that.find('.praise i').addClass('fa-thumbs-o-up').removeClass('fa-thumbs-up');
				}
			})
		})
	})

	//ajax登录
	$(".ajaxlogin").click(function(){
		$.ajax({
			 type: "POST",
			 url: "{{url('diylogin')}}",
			 data: $("#loginform").serialize(),
			 dataType: "json",
			 success: function(data){
				 if(data.status==1){
					 $(".alert").html('登录成功');
					 _alert();
					 setTimeout(function(){
						 location.href = "/";
					 },2000);
				 }else{
           $(".loginInput").val('');
					 $(".alert").html('账户或密码错误');
					 _alert();
				 }
			 }
		});
	});

</script>
</html>
